<template>
	<view>
		<view class="loading" v-if="loading || fail">
			<u-loading :show="loading"></u-loading>
			<u-empty mode="data" :show="fail"></u-empty>
		</view>
		<block v-else>
			<u-gap></u-gap>
			<view class="content-box">
				<view class="product" @click="$u.route('/pages/productDetail/productDetail?id='+productInfo.id)">
					<u-image width="144rpx" height="144rpx" border-radius="10rpx" :src="info.goodsMainPhoto"></u-image>
					<view class="info">
						<view class="name">{{info.goodsInfo.goodsName}}</view>
						<!-- <view class="sku">{{skuString}}</view> -->
						<!-- <view class="sku">{{info.goodsInfo.saleSpots}}</view> -->

						<view class="other">
							<view class=""><text>￥</text>{{info.goodsInfo.groupBuyPrice}}</view>
							<!-- <view class="">已拼{{info.goodsInfo.saleCount}}{{info.goodsInfo.unit}}</view> -->
							<view class=""></view>
						</view>
					</view>
				</view>
				<!-- <view class="message">
					<u-image width="48rpx" height="48rpx" shape="circle" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1812993978,4158651947&fm=26&gp=0.jpg"></u-image>
					<view class="text">
						莫***：这个玩意非常好用，赶紧入手一件吧
					</view>
				</view> -->
				<view class="user">
					<view class="user-item">
						<view class="u-image">
							<u-image borStyle="2rpx solid #FD5E1D" width="128" height="128" mode="aspectFill" shape="circle" :src="info.launchUserInfo.headPhoto"></u-image>
							<view class="tag">
								拼主
							</view>
						</view>
					</view>
					<view class="user-item" v-if="info.joinUserList && info.userId != item.id" v-for="(item,index) in info.joinUserList"
					 :key="index">
						<view class="u-image">
							<u-image borStyle="2rpx solid #FD5E1D" width="128" height="128" mode="aspectFill" shape="circle" :src="item.headPhoto && item.headPhoto != '' ? imgURL + item.headPhoto : appletImgUrl+'logo.png'"></u-image>
						</view>
					</view>
					<view class="station" :key="item" v-for="(item) in info.configPersonCount - (info.joinUserList ? info.joinUserList.length : 0)">
						<u-image width="128" height="128" :src="appletImgUrl+'rush-user-icon.png'"></u-image>
					</view>
				</view>
				<u-gap></u-gap>
				<view class="title" v-if="info.status == 10">还差 <text>{{info.neededUserCount}}</text>人，<u-count-down font-size="36"
					 separator="zh" :timestamp="info.timestamp"></u-count-down>
					后结束</view>
				<view class="title" v-else>
					<text style="color:#000000" v-if="info.status == 20">该抢购已经抢购完成了</text>
					<text style="color:#000000" v-if="info.status == 30">该抢购被取消了</text>
					<text style="color:#000000" v-if="info.status == 40">该抢购失败了</text>
				</view>
				<u-gap></u-gap>
			</view>
			<block v-if="info.status == 10">
				<view class="sub-btn" v-if="!myId" @click="popup = true">参与{{info.launchUserInfo.nickName}}的抢购</view>
				<view class="sub-btn" v-else @click="$u.route('/pages/user/inviteFriends/inviteFriends',{
				groupBuyingListId: info.id
			})">邀请好友</view>
			</block>
			<block v-else>
				<view class="sub-btn" @click="$u.route({
				url:'/pages/tabBar/index/index',
				type:'tab'
			})">去首页逛逛</view>
			</block>

			<u-popup mode="bottom" closeable v-model="popup" @close="closePopup">
				<view class="product-specifications-popup">
					<view class="box">
						<view class="product-info">
							<view class="u-image">
								<u-image @click="previewCover" width="200" height="200" border-radius="20" :src="goodsSku != '' ? goodsSku.goodsSkuPhoto != '' ? imgURL + goodsSku.goodsSkuPhoto : info.goodsMainPhoto :info.goodsMainPhoto"></u-image>
							</view>
							<view class="info">
								<view class=""><text>￥</text>{{goodsSku != '' ? goodsSku.skuGroupBuyPrice * count : productInfo.groupBuyPrice}}<text>/{{count}}{{productInfo.unit}}</text></view>
								<view class="">
									<!-- <view class="">销量：{{goodsSku.skuSaleCount || productInfo.saleCount}}</view> -->
									<view class=""></view>
									<view class="">库存：{{goodsSku != '' ? goodsSku.skuStock : productInfo.goodsStock}}</view>
								</view>
							</view>
						</view>
						<!-- <view class="product-price">￥<text>{{goodsSku == '' ? productInfo.groupBuyPrice : goodsSku.skuGroupBuyPrice}}</text></view> -->
						<block v-for="(item,index) in productInfo.showSkus" :key="index">
							<view class="model-name">
								<view class="title">{{item.skuKeyName}} </view>
								<view class="item-list">
									<block v-for="(x,i) in item.skuValues" :key="i">
										<view :class="['item',specsIndex[index] == i ? 'active' : '']" @click="choiceSpecs(index,i)">{{x.skuValueName}}</view>
									</block>
								</view>
							</view>
						</block>
						<view class="number">
							<view class="title">数量</view>
							<u-number-box :min="min" :max="goodsSku.skuStock || productInfo.goodsStock" v-model="count"></u-number-box>
						</view>
					</view>
					<view class="btn" @click="determine">
						确定
						<view class="safe-area-inset-bottom"></view>
					</view>
				</view>
			</u-popup>

		</block>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	export default {
		onShareTimeline() {
			return {
				title: this.info.launchUserInfo.nickName + '邀请您参与Ta的抢购',
				path: '/pages/participate/participate?groupBuyingListId=' + this.info.id + '&userId=' + uni.getStorageSync(
					'userInfo').id,
				imageUrl: this.info.goodsMainPhoto
			}
		},
		onShareAppMessage() {
			return {
				title: this.info.launchUserInfo.nickName + '邀请您参与Ta的抢购',
				path: '/pages/participate/participate?groupBuyingListId=' + this.info.id + '&userId=' + uni.getStorageSync(
					'userInfo').id,
				imageUrl: this.info.goodsMainPhoto
			}
		},
		data() {
			return {
				appletImgUrl:appletImgUrl,
				popup: false,
				loading: true,
				fail: false,
				addressState: false,
				min: 1,
				info: '',
				count: 1,
				specsIndex: [],
				goodsSku: '',
				show: false,
				myId: false,
				productInfo: '',
				imgURL: this.imageURL
			};
		},
		onLoad(options) {
			this.arr = []
			this.specsIndexArray = []
			this.skuName = []
			// console.log(options);
			if (!uni.getStorageSync('userInfo')) {
				uni.setStorageSync('proUserId', options.userId)
			}
			// this.$u.get('useraddress/defaultAddress').then(res => {
			// 	if (Object.keys(res).length != 0) {
			// 		this.userAddressId = res.id
			// 	}
			// })
			// 2388510161720409
			// options.groupBuyingListId
			this.$u.get('groupbuyinglist/groupBuyingListInfoById/' + options.groupBuyingListId).then(res => {
				this.loading = false
				if (res == '') {
					this.fail = true
					return
				}
				this.productInfo = res.goodsInfo
				if (this.productInfo.showSkus) {
					this.productInfo.showSkus.forEach(item => {
						this.specsIndexArray.push(null)
					})
					this.productInfo.goodsSku.forEach(item => {
						item.skuInfo = item.skuInfo.split(',')
					})
				}
				this.myId = uni.getStorageSync('userInfo').id == res.userId ? true : false
				
				let goodsMainPhoto = res.goodsInfo.goodsMainPhoto.split(',')
				res.goodsMainPhoto = this.imageURL + goodsMainPhoto[0]
				res.launchUserInfo.headPhoto = res.launchUserInfo.headPhoto ? this.imageURL + res.launchUserInfo.headPhoto :
				this.appletImgUrl+'logo.png'
				let currentTime = new Date()
				let cDate =
					`${currentTime.getFullYear()}-${currentTime.getMonth()+1}-${currentTime.getDate()} ${currentTime.getHours()}:${currentTime.getMinutes()}:${currentTime.getSeconds()}`
				cDate = cDate.replace(/-/g, ':').replace(' ', ':');
				cDate = cDate.split(':');
				let date1 = new Date(cDate[0], (cDate[1] - 1), cDate[2], cDate[3], cDate[4], cDate[5]);

				let buyingEstimateTime = res.buyingEstimateTime
				buyingEstimateTime = buyingEstimateTime.replace(/-/g, ':').replace(' ', ':');
				buyingEstimateTime = buyingEstimateTime.split(':');
				let date2 = new Date(buyingEstimateTime[0], (buyingEstimateTime[1] - 1), buyingEstimateTime[2],
					buyingEstimateTime[3], buyingEstimateTime[4], buyingEstimateTime[5]);
				let date3 = (date2.getTime() - date1.getTime()) / 1000; //相差秒数
				res.timestamp = date3
				// let skuString = ''
				// if (res.goodsInfo.showSkus) {
				// 	res.goodsInfo.showSkus.forEach(item => {
				// 		skuString += item.skuKeyName + '：' + item.skuValues[0].skuValueName + '，'
				// 	})
				// 	skuString = skuString.substr(0, skuString.length - 1);
				// }
				// this.skuString = skuString == '' ? '默认规格' : skuString
				this.info = res
				uni.setNavigationBarTitle({
					title: '参与' + res.launchUserInfo.nickName + '的抢购'
				})
			}).catch(error => {
				this.loading = false
				this.fail = true
			})
		},
		methods: {
			previewCover() {
				let url = ""
				if (this.goodsSku == '') {
					url = this.info.goodsMainPhoto
					uni.previewImage({
						urls: [url]
					})
					return
				}
				if (this.goodsSku.goodsSkuPhoto != '') {
					url = this.goodsSku.goodsSkuPhoto != '' ? this.imageURL + this.goodsSku.goodsSkuPhoto : this.productInfo.goodsMainPhoto[
						0]
					uni.previewImage({
						urls: [url]
					})
				} else {
					uni.showToast({
						title: '商家尚未上传该预览图',
						icon: 'none'
					})
				}
			},
			determine() {
				if (this.productInfo.showSkus && this.specsIndex == '') {
					uni.showToast({
						title: '请选择商品规格',
						icon: 'none'
					})
					return
				}
				if (this.productInfo.showSkus && this.specsIndex.indexOf(null) > -1) {
					uni.showToast({
						title: '请选择商品' + this.productInfo.showSkus[this.specsIndex.findIndex(item => item == null)].skuKeyName,
						icon: 'none'
					})
					return
				}
				if (this.productInfo.showSkus && (this.productInfo.goodsStock == 0 || this.productInfo.goodsSku.filter(item =>
						item.skuInfo == this.arr.join(','))[
						0].skuStock == 0)) {
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					})
					return
				}
				if (!uni.getStorageSync('userInfo')) {
					this.$u.route('/pages/user/login/login')
					return
				}
				this.popup = false
				this.selected = true
				console.log(this.productInfo.showSkus != '' ? this.arr.join(',') : '');
			},
			choiceSpecs(parentIndex, childIndex) {
				this.specsIndexArray[parentIndex] = this.specsIndex[parentIndex] == childIndex ? null : childIndex
				this.specsIndex = [...this.specsIndexArray]
				let isEmpty = this.specsIndex.filter(item => item == null),
					goodsSkuIndex

				if (this.specsIndexArray[parentIndex] != null) {
					let {
						skuKeyId
					} = this.productInfo.showSkus[parentIndex], {
						skuValueId
					} = this.productInfo.showSkus[parentIndex].skuValues[childIndex]
					let key = `${skuKeyId}:${skuValueId}`

					this.productInfo.goodsSku.forEach((item, eachIndex) => {
						goodsSkuIndex = item.skuInfo.findIndex(index => index == key)
						if (goodsSkuIndex != -1) {
							if (this.arr[goodsSkuIndex] == key) return
							this.arr[goodsSkuIndex] = key
							this.skuName[goodsSkuIndex] = this.productInfo.showSkus[parentIndex].skuValues[childIndex].skuValueName
						}
					})
				} else {
					// this.arr[this.specsIndex.findIndex(item => item == null)] = null
				}
				if (isEmpty.length == 0) {
					let skuInfo = this.arr.join(',')
					let goodsSku = this.productInfo.goodsSku.filter(item => item.skuInfo == skuInfo)[0]
					if (goodsSku.goodsSkuPhoto != '') goodsSku.goodsSkuPhoto = goodsSku.goodsSkuPhoto
					this.goodsSku = goodsSku
					// this.skuName =
					// 	`${this.productInfo.showSkus[parentIndex].skuKeyName},${this.productInfo.showSkus[parentIndex].skuValues[childIndex].skuValueName}`
				} else {
					this.goodsSku = ''
					// this.skuName = ''
				}
			},
			closePopup() {
				if (this.selected) {
					uni.setStorageSync('purchasedSeparatelyInfo', {
						goodsMainPhoto: this.goodsSku != '' ? this.goodsSku.goodsSkuPhoto ? this.imgURL + this.goodsSku.goodsSkuPhoto :  this.info.goodsMainPhoto : this.info.goodsMainPhoto,
						goodsName: this.productInfo.goodsName,
						count: this.count,
						skuAttrs: this.productInfo.showSkus != '' ? this.arr.join(',') : '',
						skuName: this.skuName.join('，'),
						salePrice: this.goodsSku != '' ? this.goodsSku.skuGroupBuyPrice : this.productInfo.groupBuyPrice
					})
					this.$u.route('/pages/purchase/placeOrder/placeOrder', {
						participateGroup: true,
						purchaseState: 1,
						groupBuyingListId: this.info.id,
						goodsId: this.productInfo.id
						// groupBuyType: this.info.groupBuyType
					})
					this.selected = false
				}
			},
		}
	}
</script>

<style lang="scss">
	.product-specifications-popup {
		.box {
			padding: 0 30rpx;

			.product-info {
				position: relative;
				padding-left: 220rpx;
				display: flex;
				// margin-bottom: 80rpx;

				.info {
					flex: 1;
					padding-top: 20rpx;

					>view {
						&:last-child {
							margin-top: 40rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 30rpx;
						}

						&:first-child {
							font-size: 36rpx;
							color: #FF4D46;

							text {
								&:first-child {
									color: #FF4D46;
									font-size: 20rpx;
								}

								&:last-child {
									color: #AAAAAA;
									font-size: 24rpx;
								}
							}
						}
					}
				}

				.u-image {
					position: absolute;
					left: 0;
					top: 0;
					transform: translateY(-20rpx);
				}
			}
		}

		.btn {
			margin-top: 100rpx;
			background: linear-gradient(90deg, #FF3768, #FC6161);
			text-align: center;
			color: #FFFFFF;
			font-size: 30rpx;
			padding: 30rpx 0;
		}

		.number {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;

			.title {
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.model-name {
			margin-top: 40rpx;

			.item-list {
				display: flex;
				flex-wrap: wrap;

				.item {
					font-size: 26rpx;
					padding: 5rpx 20rpx;
					margin-top: 20rpx;
					text-align: center;
					border-radius: 10rpx;
					background-color: rgba($color: #aaaaaa, $alpha: .2);
					margin-right: 11rpx;
					color: #aaaaaa;

					&.active {
						background-color: rgba($color: #F39A15, $alpha: .2);
						color: #F39A15;
					}
				}
			}

			.title {
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.product-price {
			padding: 20rpx 0;
			padding-bottom: 0;
			color: #FF4E47;
			font-size: 20rpx;

			text {
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}

	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sub-btn {
		line-height: 100rpx;
		font-size: 30rpx;
		text-align: center;
		border-radius: 49rpx;
		color: #FFFFFF;
		margin: 0 60rpx;
		margin-top: 60rpx;
		background: linear-gradient(90deg, #FF3868, #FC6161);
	}

	.content-box {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 30rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				color: #FF4E47;
			}

		}

		.user {
			// margin-top: 35rpx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			// padding: 0 16rpx;
			padding-bottom: 35rpx;
			width: 609rpx;
			// background-color: red;
			margin: 0 auto;

			.station {
				margin-top: 35rpx;
				padding: 0 14rpx;
			}

			.user-item {
				// margin-right: 40rpx;
				margin-top: 35rpx;
				padding: 0 14rpx;

				.tag {
					position: absolute;
					bottom: -20rpx;
					left: 50%;
					width: 76rpx;
					transform: translateX(-50%);
					text-align: center;
					background: linear-gradient(90deg, #FD5C1D, #FD9B1D);
					border: 1rpx solid #FFFFFF;
					border-radius: 17px;
					color: #FFFFFF;
					font-size: 24rpx;
					padding: 2rpx 0;
				}

				.u-image {
					position: relative;
					width: 128rpx;
					height: 128rpx;
					// border: 2rpx solid #F39D21;
					// border-radius: 50%;
				}
			}
		}

		.message {
			padding: 15rpx 30rpx;
			border-top: 1rpx solid #F7F7F7;
			border-bottom: 1rpx solid #F7F7F7;
			display: flex;
			align-items: center;

			.text {
				flex: 1;
				margin-left: 22rpx;
			}
		}

		.product {
			padding: 30rpx;
			display: flex;
			border-bottom: 1rpx solid #F7F7F7;

			.info {
				flex: 1;
				margin-left: 20rpx;
				position: relative;

				.other {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					display: flex;
					justify-content: space-between;

					view {
						&:first-child {
							color: #FF4E46;

							text {
								font-size: 20rpx;
							}
						}

						&:last-child {
							color: #AAAAAA;
						}
					}
				}

				.sku {
					color: #AAAAAA;
					padding-top: 7rpx;
					font-size: 24rpx;
				}
			}
		}
	}

	page {
		background-color: #f7f7f7;
	}
</style>
